<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="js/layer/skin/default/layer.css" />
		<link rel="stylesheet" href="css/style.css" />
		<title></title>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-action-back mui-icon mui-icon-arrowthinleft mui-pull-left"></a>
			<h1 class="mui-title">详情</h1>
		</header>

		<!--footer-->

		<nav class="mui-bar mui-bar-tab footer">
			<div class="">
				<div class="tm-flex">
					<div class="tm-flex-1">
						<a href="" class="contact-btn tm-block">
							<div class="tm-flex flex-pack-center flex-align-center height-all">
								<div class="tm-icon-item">
									<div class="tm-icon">
										<img src="images/phone-green.png" alt="" width="17" height="17" />
									</div>
									<div class="tm-icon-label">
										<div class="tm-flex-row-xs">
											咨询电话
										</div>
										<div class="tm-flex-row-xs">
											9:00 - 18:00
										</div>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="tm-flex-1">
						<div class="footer-btn-group">
							<button id="open-layer" type="button" class="mui-btn mui-btn-green mui-btn-block">立即兑换</button>
						</div>
					</div>
				</div>
			</div>
		</nav>

		<!--footer end-->

		<div class="mui-content">
			<!--swiper-->
			<div class="controll-swiper">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:">
								<img src="images/banner.jpg" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:">
								<img src="images/banner.jpg" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:">
								<img src="images/banner.jpg" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:">
								<img src="images/banner.jpg" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:">
								<img src="images/banner.jpg" alt="" />
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:">
								<img src="images/banner.jpg" alt="" />
							</a>
						</div>
					</div>

					<div class="swiper-pagination">

					</div>
				</div>
			</div>
			<!--swiper end-->

			<div class="tm-label-lg tm-bg-white">
				<div class="main-content">
					<div class="tm-flex-row">
						<div class="tm-inline-1-5">
							香百年汽车用香水座式车载古龙香薰瓶车内男女饰品摆件持久除异味
						</div>
					</div>
					<div class="tm-flex-row">
						<div class="tm-flex">
							<div class="tm-flex-1">
								<span class="tm-font-yellow tm-mdx-size tm-font-boldx">300积分</span>
							</div>
							<div>
								<span class="tm-font-gray tm-df-size">已兑换:2436</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--兑换说明-->
			<div class="uk-clearfix uk-margin-small-top">
				<div class="tm-label-md tm-bg-white">
					<div class="main-content">
						<span class="tm-font-boldx">兑换说明</span>
					</div>
				</div>

				<div class="goods-details-img">
					<img src="images/goods-dt.jpg" alt="" />
				</div>
				<div class="goods-details-text tm-bg-white">
					<div class="tm-label">
						<div class="main-content">
							<div class="tm-inline-1-8 tm-df-size">
								<p>1）用户确认所兑换的商品无误后，商品所对应的积分将从用户的积分账户余额中冻结。</p>
								<p>2）兑换审核将于24小时内完成，审核通过后，若购买虚拟商品，使用兑换码在兑换记录中查看；若兑换实物商品，则在审核通过后8小时内交付快递合作方。</p>

							</div>
						</div>
					</div>
				</div>

			</div>
			<!--兑换说明 end-->
		</div>
		
		
		
		<!--layer-->

		<div id="layer" style="display: none;">
			<div class="tm-layer-header tm-default-size tm-font-default">
				<div class="tm-label-lg">
					<div class="main-content">
						<div class="tm-inline-1-5 tm-df-size tm-font-bold">
							确认要兑换该商品吗？
						</div>
					</div>
				</div>
			</div>
			<div class="tm-layer-body">
				<div class="main-content">
					<input type="password" class="tm-small-input" value="" placeholder="输入登录密码确认" />
				</div>
			</div>
			<div class="tm-layer-footer">
				<div class="tm-label-lg">
					<div class="main-content-md">
						<div class="to-btn-group">
							<ul class="uk-grid">
								<li class="uk-width-1-2">
									<button id="close-layer" type="button" class="mui-btn mui-btn-block">取消</button>
								</li>
								<li class="uk-width-1-2">
									<button type="button" class="mui-btn mui-btn-green mui-btn-block">确定</button>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--layer end-->
		

		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script type="text/javascript">
			mui.init();
		</script>

		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true
			});
		</script>
		
		<script type="text/javascript">
			mui(document).on('tap', "#open-layer", function() {
				layer.open({
					type: 1,
					title: false,
					closeBtn: 0,
					skin: 'tm-page-layer',
					shade: 0.5,
					shadeClose: true,
					content: $('#layer')
				});
			})
			//关闭
			mui(document).on("tap", "#close-layer", function() {
				layer.closeAll();
			})
		</script>
	</body>

</html>